<template>
  <div class="albumDetails w">
    <el-empty
      v-if="Object.keys(album).length === 0 && songs.length === 0"
      description="正在加载此数字专辑详情"
    ></el-empty>
    <div v-else>
      <!-- 音乐的基本信息板块 -->
      <el-row type="flex" class="albumDetails_info">
        <el-col :span="6">
          <GlobalImageDeep
            :url="album.picUrl"
            :imgWidth="250"
            :imgHeight="250"
          />
        </el-col>
        <el-col :span="18">
          <h2 style="color: #333">{{ album.name }}</h2>
          <!-- 作者得相关 -->
          <div class="category_info_author">
            歌手:&nbsp;&nbsp;&nbsp;
            <GlobalImageDeep
              :url="album.artists[0].picUrl"
              :imgWidth="60"
              :imgHeight="60"
            />
            <el-link
              type="primary"
              @click="toSingerDetailsPage(album.artists[0].id)"
              >{{ album.artists[0].name }}</el-link
            >
          </div>
          <div class="category_info_other">
            发行公司:&nbsp;&nbsp;&nbsp;{{ album.company }}
          </div>
          <div class="category_info_other">
            发行时间: &nbsp;&nbsp;&nbsp;<i>{{
              formatCreareTime(album.publishTime)
            }}</i>
          </div>
          <!-- 一些按钮 -->
          <div class="category_info_button">
            <el-button type="success">
              <i class="iconfont icon-bofang"></i>
              播放全部
            </el-button>
            <el-button>
              <i class="iconfont el-icon-download"></i>
              下载
            </el-button>
            <el-button>
              <i
                class="iconfont"
                :class="album.info.liked ? 'icon-shoucang' : 'icon-tianjia'"
              ></i>
              收藏
              <span style="margin-left: 5px"> {{ album.info.likedCount }}</span>
            </el-button>

            <el-button>
              <i class="iconfont el-icon-chat-line-round"></i>
              评论
              <span style="margin-left: 5px">{{
                album.info.commentCount
              }}</span>
            </el-button>
            <el-button>
              <i class="iconfont icon-fenxiang"></i>
              分享
              <span style="margin-left: 5px"> {{ album.info.shareCount }}</span>
            </el-button>
          </div>
        </el-col>
      </el-row>
      <div class="desc">
        <div>专辑描述:</div>
        <p>{{ album.description }}</p>
      </div>
      <!-- 歌曲列表 -->
      <div class="albumDetailsList" v-if="songs.length !== 0">
        <div class="songsList_item title">
          <div class="songsList_item_index"></div>
          <div class="songsList_item_info">歌曲</div>
          <div class="songsList_item_author">作者</div>
          <div class="songsList_item_dt">时长</div>
        </div>
        <div
          class="songsList_item"
          v-for="(item, index) in songs"
          :key="item.id"
        >
          <div class="songsList_item_index">{{ index + 1 }}</div>
          <div class="songsList_item_info">
            <GlobalImageDeep
              :imgWidth="70"
              :imgHeight="70"
              :url="item.al.picUrl"
            />
            <p>{{ item.name }}</p>
            <div class="songsList_item_info_bt">
              <div>
                <i class="iconfont icon-bofang"></i>
              </div>
              <div>
                <i class="iconfont icon-tianjiawenjian"></i>
              </div>
            </div>
          </div>
          <div class="songsList_item_author one_txt_cut">
            {{ formatName(item.ar) }}
          </div>
          <div class="songsList_item_dt">{{ formatMS(item.dt) }}</div>
        </div>
      </div>
      <GlobalComment :id="parseInt($route.params.id)" :type="3" />
    </div>
  </div>
</template>

<script>
import moment from "moment";
import { getAlbumDetails } from "../../../../api/albumDetailsApi";
export default {
  name: "albumDetails",
  components: {},
  data() {
    return {
      songs: [], // 专辑里面的歌曲
      album: {}, // 专辑的信息
      id: 0,
    };
  },
  created() {
    this.id = this.$route.params.id;
    this.getAlbumDetailsMthod();
  },
  methods: {
    async getAlbumDetailsMthod() {
      let result = await getAlbumDetails(this.id);
      if (result.code === 200) {
        this.songs = result.songs;
        this.album = result.album;
      }
    },
    // 格式化创建时间
    formatCreareTime(time) {
      return moment(time).format("YYYY-MM-DD") + "  创建";
    },
    // 格式化时间
    formatDate(time) {
      return moment(time).format("MM月DD日");
    },
    formatMS(dt) {
      return moment(dt).format("mm:ss");
    },
    formatName(names) {
      let str = "";
      names.forEach((item) => {
        str = str + item.name + "/";
      });
      str = str.slice(0, str.length - 1);
      return str;
    },
    toSingerDetailsPage(id) {
      this.$router.push(`/singerDetails/${id}`);
    },
  },
  computed: {},
};
</script>

<style lang="less" scoped>
.albumDetails {
  padding: 30px 0;
  color: #000000;
  font-size: 14px;
  .albumDetails_info {
    /deep/ .el-image img {
      border-radius: 8px;
    }
    .category_info_author {
      display: flex;
      height: 60px;
      margin: 10px 0;
      align-items: center;
      /deep/ .el-image img {
        border-radius: 50% !important;
      }
      a {
        margin: 0 10px;
      }
      i {
        color: #999999;
        font-size: 12px;
      }
    }
    .category_info_other {
      margin-bottom: 10px;
    }
  }
  .desc {
    height: 140px;
    padding-top: 20px;
    overflow-y: auto;
    div {
      font-size: 16px;
    }
    p {
      text-indent: 2em;
      font-size: 12px;
    }
  }
  // 歌曲列表
  .albumDetailsList {
    padding: 20px 0;
    font-size: 14px;
    .title {
      color: #999;
      height: 50px !important;
    }
    .songsList_item {
      display: flex;
      align-items: center;
      height: 80px;
      // background-color: red;
      &:hover {
        .songsList_item_info_bt {
          opacity: 1 !important;
        }
      }
      .songsList_item_index {
        width: 40px;
        text-align: center;
      }
      .songsList_item_author {
        width: 200px;
        padding-right: 20px;
        // background-color: green;
      }
      .songsList_item_dt {
        width: 50px;
        // background-color: #fff;
      }
      .songsList_item_info {
        position: relative;
        display: flex;
        align-items: center;
        flex: 1;
        padding-right: 20px;
        p {
          margin-left: 10px;
        }
        /deep/ .el-image img {
          border-radius: 8px;
        }
        .songsList_item_info_bt {
          display: flex;
          opacity: 0;
          position: absolute;
          right: 20px;
          > div {
            display: flex;
            align-items: center;
            justify-content: center;

            border-radius: 50%;
            width: 30px;
            height: 30px;
            color: #999999;
            &:hover {
              border: 1px solid @globalColor;
              color: @globalColor;
              cursor: pointer;
            }
          }
        }
      }
    }
  }
}
</style>
